<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
    <div class="tabs">
      <!-- 左边分类组件 TabLeft -->
      <TabLeft :tabs="tabs" :currentIndex="currentIndex"></TabLeft>

      <!-- 右边列表组件 TabRight -->
      <TabRight>
        <!-- 单个商品 -->
        <Good></Good>
      </TabRight>



    </div>
    
  
  </div>
</template>

<script>
import pic1 from './assets/1.jpg'
import pic2 from './assets/2.jpg'
import pic3 from './assets/3.jpg'


import TabLeft from './components/TabLeft.vue'
import TabRight from './components/TabRight.vue'


export default {
  provide() {
    return {
      currentIndex:0, //用来保存当前点击的分类下标
      tabs:[
        {  //一个对象是一个分类
          tabName:'三文鱼',
          list:[
            {pic:pic1,name:'三文鱼',price:45},
            {pic:pic1,name:'高级三文鱼',price:55},
            {pic:pic1,name:'vip三文鱼',price:65},
          ]
        },
        {  //一个对象是一个分类
          tabName:'刺身',
          list:[
            {pic:pic2,name:'刺身',price:45},
            {pic:pic2,name:'高级刺身',price:55},
            {pic:pic2,name:'vip刺身',price:65},
          ]
        },
        {  //一个对象是一个分类
          tabName:'大虾',
          list:[
            {pic:pic3,name:'大虾',price:45},
            {pic:pic3,name:'高级大虾',price:55},
            {pic:pic3,name:'vip大虾',price:65},
          ]
        },
      ]
    }
  },
  components:{
    TabLeft,
    TabRight,
  }
  
}
</script>

<style lang="scss" scoped>
  #app .tabs {
    display: flex;
  }

</style>
